<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bosh</title>

    <script type="text/javascript" src="js/libs/jQuery/jquery-1.4.4.dev.js" ></script>

    <!--script type="text/javascript" src="js/libs/jQGrid/jquery.jqGrid.3.8.1.min.js" ></script-->
    <script type="text/javascript" src="js/libs/dev.jqGrid-4115fcb/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="js/libs/dev.jqGrid-4115fcb/jquery.jqGrid.js" ></script>

    <script type="text/javascript" src="js/app01.js" ></script>

    <style type="text/css">
        body {background-color:White; color:Blue;font-family:Tahoma;font-size:9pt;}
    </style>

    <link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css" />


    <script type="text/javascript">

        $(document).ready(function () {

            //$('#idSubmit').submit(function () {
            $('#idSubmit').click(function () {

                //Request($('#idUrl').val, $('#idService').val, $('#idMethod').val, $('#idParams').val, null);
                Request();

                return false;
            });
        });

//        function Request(url, service, method, args, data) {
        function Request() {

            var u = $('#idUrl').val();
            var s = $('#idService').val();
            var m = $('#idMethod').val();
            var p = $('#idParams').val();

            $.ajax({
                url : u + '/' + s + '/' + m,
                data : p,
                dataType : 'json',
                cache : false,
                global : false,
                error : handleError,
                success: handleResponse
            });
        };


        function handleResponse(/*ctx -> this,*/data, status, xhr) {

            var header = "<tr>";
            for (var i = 0; i <= data.columnNames.length - 1; i++) {
                header += "<th>" + data.columnNames[i] + "</th>";
            }
            header += "</tr>";

            $("#RetData").html(header);

            var numRows = data.columnData[0].Data.length;
            for (var r = 0; r <= numRows - 1; r++) {

                var row = "<tr>";
                for (var c = 0; c <= data.columnNames.length - 1; c++) {

                    row += "<td>";
                    row += data.columnData[c].Data[r];
                    row += "</td>";
                }
                row += "</tr>";

                $("#RetData").append(row);
            }
        }

        //function handleResponse(ctx, data, status, xhr) {
        /*
        function handleResponse(data, status, xhr) {

            // create a model
            var colModel = [];
            for (var i = 0; i <= data.columnNames.length-1; i++) {
                colModel[i] = { name: data.columnNames[i], width: 60 };
            }

            $("#RetData").jqGrid({
                datatype: "local",
                height: 400,
                colNames: data.columnNames,
                colModel: colModel,
                multiselect: false,
                caption: "Data"
            });

            var numRows = data.columnData[0].Data.length;
            for (var i = 0; i <= numRows-1; i++) {
                var row = [];

                for (var c = 0; c <= data.columnNames.length - 1; c++) {
                    row[c] = data.columnData[c].Data[i];
                }

                jQuery("#RetData").jqGrid('addRowData', i + 1, row);
            }
        }
        */

        function handleError(xhr, status, errMsg) {
        }

    </script>
</head>
<body>

    <div>
        <form action="">
            <fieldset><legend>Ajax Input</legend>
                <label>Url:</label><br /><input id="idUrl" type="text" value="http://localhost:13500/ApiHandler.ashx" size="48"/><br />
                <label>Service:</label><br /><input id="idService" type="text" value="SystemState" /><br />
                <label>Method:</label><br /><input id="idMethod" type="text" value="GetRunningApps" /><br />
                <label>Parameters:</label><br /><textarea id="idParams" rows="8" cols="40"></textarea>

                <p>
                <!--input id="idSubmit" type="submit" value="Submit" /-->
                <input id="idSubmit" type="button" value="Submit" />
                <!--input type="reset" value="Clear" /-->
                </p>
            </fieldset>
        </form>
    </div>

    <div>
        <table id="RetData"></table>
    </div>

</body>
</html>
